/**
 * @authors tanqichao
 * @date    2017-03-21 13:59:27
 * @module  首页
 */
import React from 'react';
import NewAd from './newAd';
import { connect } from 'dva';
import { Row, Col, Tabs, Button, DatePicker } from 'antd';
import { Link } from "dva/router";
import { createForm } from 'rc-form';
import Statistics from './statistics';
import Charting from './charting';
import Consulting from './consulting';
import Styles from './indexPage.less';
import classNames from 'classnames';
import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');


import NewAdvertiser from './newAdvertiser';
import { AccessControl } from '../../utils/common';

const { RangePicker } = DatePicker;
const TabPane = Tabs.TabPane;

const IndexPage = (props) => {
  const permissionList = props.permissions;
  const { agent, advert } = props;
  const renderIconFont = (type, data) => {
    if (type) {
      const iconFonts = type[data].toString().split('');
      const Options = iconFonts.map((item,index) => {
          let cls = classNames(Styles.money, Styles.iconfont, Styles[`iconIconTest${item}`]);
          return <i key={index} className={cls}></i>
        }
      );
        return Options;
    }
  }
  // 切换时间
  const handleRangePicker = (dates, dateStrings) => {
    const params = {
      beginTime: dateStrings[0],
      endTime: dateStrings[1]
    };
    props.dispatch({
      type: 'indexPage/fetchStatistics',
      payload: JSON.stringify(params)
    })

  }

  return (
    <div className={Styles.indexPage}>
      <Consulting {...props.balance} />
      <div className={Styles.adCount}>
        <Row gutter={18}>
          {AccessControl(permissionList, 'dsp_advert_list') ?
            <Col span={12}>
              <p className={Styles.title}>
                广告主统计
                <Button type="primary" className={Styles.newCreateAd}>
                  <Link to="/page/createCustomer">新建广告主</Link>
                </Button>
              </p>
              <Row className={Styles.newAd} gutter={7}>
                <Col span={12}>
                  <div className={Styles.panel}>
                    <span className={Styles.target}>总广告主</span>
                    <span className={Styles.num}>
                    { advert? renderIconFont(advert, 'advertTotalCount') : '-' }
                    </span>
                  </div>
                </Col>
                <Col span={12}>
                  <div className={Styles.panel}>
                    <span className={Styles.target}>使用中</span>
                    <span className={Styles.num}>
                    { advert? renderIconFont(advert, 'advertPassCount') : '-' }
                    </span>
                  </div>
                </Col>
              </Row>
              <Row gutter={7} className={Styles.mt4}>
                <Col span={12}>
                <div className={Styles.panel}>
                  <span className={Styles.target}>未通过</span>
                  <span className={Styles.num}>
                  { advert? renderIconFont(advert, 'advertNotPassCount') : '-'}
                  </span>
                </div>
                </Col>
                <Col span={12}>
                  <div className={Styles.panel}>
                    <span className={Styles.target}>审核中</span>
                    <span className={Styles.num}>
                    { advert? renderIconFont(advert, 'advertAuditingCount') : '-' }
                    </span>
                  </div>
                </Col>
              </Row>
            </Col> : null}
          {AccessControl(permissionList, 'dsp_advert_list') ?
            <Col span={12}>
              <p className={Styles.adTitle}>
                <span>广告统计</span>
                {AccessControl(permissionList, 'dsp_ad_create') ?
                  <Button type="primary" className={Styles.newCreateAds}>
                    <Link to="/page/ad/create">新建广告</Link>
                  </Button> : null}
              </p>
              <Row className={Styles.newAdvertiser} gutter={7}>
                <Col span={12}>
                  <div className={Styles.panel}>
                    <span className={Styles.target}>总广告</span>
                    <span className={Styles.num}>
                      { agent? renderIconFont(agent, 'advertCount') : '-' }
                    </span>
                  </div>
                </Col>
                <Col span={12}>
                  <div className={Styles.panel}>
                    <span className={Styles.target}>投放中</span>
                    <span className={Styles.num}>
                      { agent? renderIconFont(agent, 'puttingCount') : '-' }
                    </span>
                  </div>
                </Col>
              </Row>
              <Row gutter={7} className={Styles.mt4}>
                <Col span={12}>
                  <div className={Styles.panel}>
                    <span className={Styles.target}>未通过</span>
                    <span className={Styles.num}>
                      { agent? renderIconFont(agent, 'refuseCount') : '-' }
                    </span>
                  </div>
                </Col>
                <Col span={12}>
                  <div className={Styles.panel}>
                    <span className={Styles.target}>审核中</span>
                    <span className={Styles.num}>
                      { agent? renderIconFont(agent, 'auditIngCount') : '-' }
                    </span>
                  </div>
                </Col>
              </Row>
            </Col> :
            <Col span={24}>
              <p className={Styles.adTitle}>
                广告统计
                {AccessControl(permissionList, 'dsp_ad_create') ?
                  <Button type="primary" className={Styles.newCreateAds}>
                    <Link to="/page/ad/create">新建广告</Link>
                  </Button> : null}
              </p>
              <Row className={Styles.newAdvertiser} gutter={7}>
                <Col span={6}>
                  <div className={Styles.panel}>
                    <span className={Styles.target}>总广告</span>
                    <span className={Styles.num}>
                      { agent? renderIconFont(agent, 'advertCount') : '-' }
                    </span>
                  </div>
                </Col>
                <Col span={6}>
                  <div className={Styles.panel}>
                    <span className={Styles.target}>投放中</span>
                    <span className={Styles.num}>
                      { agent? renderIconFont(agent, 'puttingCount') : '-' }
                    </span>
                  </div>
                </Col>
                <Col span={6}>
                  <div className={Styles.panel}>
                    <span className={Styles.target}>未通过</span>
                    <span className={Styles.num}>
                      { agent? renderIconFont(agent, 'refuseCount') : '-' }
                    </span>
                  </div>
                </Col>
                <Col span={6}>
                  <div className={Styles.panel}>
                    <span className={Styles.target}>审核中</span>
                    <span className={Styles.num}>
                      { agent? renderIconFont(agent, 'auditIngCount') : '-' }
                    </span>
                  </div>
                </Col>
              </Row>
            </Col>}
        </Row>
      </div>
      {/* AccessControl(permissionList, 'dsp_advert_list') ? <NewAdvertiser {...props.advert} permissions={props.permissions} /> : null */}
      {/*<NewAd {...props.agent} permissions={props.permissions} />*/}
      <div className={Styles.adTable}>
        <RangePicker
          size="small"
          onChange={handleRangePicker}
          defaultValue={[moment().subtract(7, 'days'), moment()]}
        />
        <Tabs defaultActiveKey="1" type="card">
          <TabPane tab="表格统计" key="1"><Statistics /></TabPane>
          <TabPane tab="报表统计" key="2"><Charting /></TabPane>
        </Tabs>
      </div>
    </div>
  )
};

export default connect((state) => {
  const { balance, advert, agent, permissions } = state.indexPage;
  return {
    balance,
    advert,
    agent,
    permissions
  }
})(IndexPage);
